<script lang="ts" setup>
import { ref, onBeforeUnmount, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
// 导入图标工具
import { Plus, Document } from "@/utils/icons.js";
// 导入消息工具
import message from "@/utils/message.js";

const router = useRouter();
const route = useRoute();
const isEditMode = ref(!!route.query.id);

// 表单数据
const form = ref({
    title: "",
    type: "fulltime",
    count: 1,
    salary: "",
    location: "",
    description: "",
    requirements: "",
});

// 如果是编辑模式，加载数据
onMounted(() => {
    if (isEditMode.value) {
        // 这里添加实际的数据加载逻辑
        console.log("加载职位数据，ID:", route.query.id);
        // 模拟加载数据
        form.value = {
            title: "前端开发工程师",
            type: "fulltime",
            count: 3,
            salary: "15k-25k",
            location: "北京海淀区",
            description: "负责前端开发工作",
            requirements: "3年以上前端开发经验",
        };
    }
});

// 职位类型选项
const jobTypes = [
    { label: "全职", value: "fulltime" },
    { label: "兼职", value: "parttime" },
    { label: "实习", value: "internship" },
];

// 表单验证规则
const rules = {
    title: [
        { required: true, message: "请输入职位名称", trigger: "blur" },
        { min: 2, max: 30, message: "长度在2到30个字符", trigger: "blur" },
    ],
    type: [{ required: true, message: "请选择职位类型", trigger: "change" }],
    count: [
        { required: true, message: "请输入招聘人数", trigger: "blur" },
        { type: "number", min: 1, message: "至少招聘1人", trigger: "blur" },
    ],
    description: [
        { required: true, message: "请输入职位描述", trigger: "blur" },
        { min: 10, message: "至少输入10个字符", trigger: "blur" },
    ],
    requirements: [
        { required: true, message: "请输入任职要求", trigger: "blur" },
        { min: 10, message: "至少输入10个字符", trigger: "blur" },
    ],
};

// 添加类型定义
interface FormInstance {
    validate: () => Promise<boolean>;
    [key: string]: any;
}

const formRef = ref<FormInstance | null>(null);

const submitForm = async () => {
    if (!formRef.value) return;

    try {
        await formRef.value.validate();
        console.log("表单验证通过，提交数据:", form.value);
        // 这里添加实际提交逻辑
        router.push({
            path: "/company/jobList",
        });
    } catch (error) {
        console.log("表单验证失败:", error);
    }
};

const saveDraft = () => {
    console.log("保存草稿:", form.value);
};
</script>

<template>
    <div class="job-form-container">
        <div class="header">
            <h2>{{ isEditMode ? "编辑职位" : "发布新职位" }}</h2>
        </div>

        <el-form
            :model="form"
            :rules="rules"
            label-width="100px"
            label-position="top"
            class="form-content"
            ref="formRef"
        >
            <el-form-item label="职位名称" required>
                <el-input v-model="form.title" placeholder="请输入职位名称" />
            </el-form-item>

            <div class="form-row">
                <el-form-item label="职位类型" class="form-col">
                    <el-select v-model="form.type" placeholder="请选择">
                        <el-option v-for="item in jobTypes" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="招聘人数" class="form-col">
                    <el-input-number v-model="form.count" :min="1" />
                </el-form-item>
            </div>

            <div class="form-row">
                <el-form-item label="薪资范围" class="form-col">
                    <el-input v-model="form.salary" placeholder="例如: 10k-20k" />
                </el-form-item>

                <el-form-item label="工作地点" class="form-col">
                    <el-input v-model="form.location" placeholder="例如: 北京海淀区" />
                </el-form-item>
            </div>

            <el-form-item label="职位描述" required>
                <el-input
                    v-model="form.description"
                    type="textarea"
                    :rows="5"
                    placeholder="详细描述职位职责和工作内容"
                />
            </el-form-item>

            <el-form-item label="任职要求" required>
                <el-input
                    v-model="form.requirements"
                    type="textarea"
                    :rows="5"
                    placeholder="列出所需的技能、经验和资格"
                />
            </el-form-item>

            <el-form-item class="form-actions">
                <el-button type="primary" :icon="Plus" @click="submitForm"> 发布职位 </el-button>
                <el-button :icon="Document" @click="saveDraft"> 保存草稿 </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>
.job-form-container {
    padding: 20px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.header {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.form-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-col {
    flex: 1;
}

.form-actions {
    margin-top: 30px;
    text-align: center;
}

.el-textarea {
    font-family: inherit;
}
</style>
